import React, { useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import { assets } from '../../../assets/assets'
const NavBar = ({ isDarkMode, setIsDarkMode }) => {
  const sideMenuRef = useRef()
  const [isScroll, setIsScroll] = useState(false)
  const openMenu = () => {
    sideMenuRef.current.style.transform = 'translateX(-16rem)'
  }
  const closeMenu = () => {
    sideMenuRef.current.style.transform = 'translateX(16rem)'
  }
  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (scrollY > 50) {
        setIsScroll(true)
      } else {
        setIsScroll(false)
      }
    })
  }, [])
  return (
    <>
      <div className="fixed top-0 right-0 w-11/12 -z-10 translate-y-[-80%] dark:hidden">
        <Image src={assets.hearerbg} alt="hearerbg" className="w-full"></Image>
      </div>
      <nav
        className={`w-full fixed px-5 lg:px-8 xl:px-[8%] py-4 flex items-center justify-between z-50 ${
          isScroll
            ? 'bg-white bg-opacity-50 backdrop-blur-lg shadow-sm dark:bg-darkTheme dark:shdow-white/20:'
            : ''
        }`}
      >
        <a href="#top">
          <Image
            src={assets.logo}
            className="w-28 cursor-pointer mr-14"
            alt="logo"
          ></Image>
        </a>
        <ul
          className={`hidden md:flex items-center gap-6 lg:gap-8 rounded-full px-12 py-3 ${
            isScroll
              ? ''
              : 'bg-white shadow-sm bg-opacity-50 dark:border dark:border-white/50 dark:bg-transparent'
          } `}
        >
          <li>
            <a className="font-serif" href="#top">
              Home
            </a>
          </li>
          <li>
            <a className="font-serif" href="#about">
              About me
            </a>
          </li>
          <li>
            <a className="font-serif" href="#services">
              Service
            </a>
          </li>
          <li>
            <a className="font-serif" href="#work">
              My Work
            </a>
          </li>
          <li>
            <a className="font-serif" href="#contact">
              Contact me
            </a>
          </li>
        </ul>
        <div className="flex items-center gap-4">
          <button onClick={() => setIsDarkMode((prev) => !prev)}>
            <Image
              src={isDarkMode ? assets.sun : assets.moon}
              alt="moon"
              className="w-6"
            ></Image>
          </button>
          <a
            href="#contact"
            className="hidden lg:flex items-center gap-3 px-10 border border-gray-500 rounded-full ml-4 py-2.5 font-serif dark:border-white/50 "
          >
            Contact me
            <Image
              src={isDarkMode ? assets.arrow_dark : assets.arrow}
              alt="arrow"
              className="w-3"
            ></Image>
          </a>
          <button onClick={openMenu} className="block md:hidden ml-3">
            <Image
              src={isDarkMode ? assets.menu_dark : assets.menu}
              alt="menu"
              className="w-6"
            ></Image>
          </button>
        </div>
        {/* mobile menu */}
        <ul
          ref={sideMenuRef}
          className="flex md:hidden flex-col gap-4 py-20 px-10 fixed -right-64 top-0 bottom-0 w-64 z-50 h-screen bg-rose-50 transition duration-500 dark:bg-darkHover dark:text-white"
        >
          <div className="absolute top-6 right-6">
            <Image
              src={isDarkMode ? assets.close_dark : assets.close}
              alt="close"
              className="w-5 cursor-pointer"
              onClick={closeMenu}
            ></Image>
          </div>
          <li>
            <a onClick={closeMenu} className="font-serif" href="#top">
              Home
            </a>
          </li>
          <li>
            <a onClick={closeMenu} className="font-serif" href="#about">
              About me
            </a>
          </li>
          <li>
            <a onClick={closeMenu} className="font-serif" href="#services">
              Service
            </a>
          </li>
          <li>
            <a onClick={closeMenu} className="font-serif" href="#work">
              My Work
            </a>
          </li>
          <li>
            <a onClick={closeMenu} className="font-serif" href="#contact">
              Contact me
            </a>
          </li>
        </ul>
      </nav>
    </>
  )
}

export default NavBar
